<template>
  <epgis-nav-container :title="pageTitle">
    <template #container>
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <van-search
          v-model="keyWord"
          placeholder="请输入搜索建议内容关键词"
          @search="onSearch"
        />
        <van-list
          class="listBox"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          v-if="dataList && dataList.length > 0">
          
          <div class="layoutVerticle" v-for="(item, index) in dataList" :key="index">
            <div class="layoutVerticle" style="padding: 10px 20px;">
              <div class="layoutHorizontal">
                <span style="font-size: 14px; color: #b9b9b9;white-space: nowrap;">建议内容：</span>
                <span style="font-size: 14px; color: #4d4d4d;">{{item['suggestionContent']}}</span>
              </div>
              <div class="layoutHorizontal" style="margin-top: 6px;" >
                <span style="font-size: 14px; color: #b9b9b9;white-space: nowrap; ">创建时间：</span>
                <span style="font-size: 14px; color: #4d4d4d;"> {{ item['createTime'] && item['createTime'].length > 16 ? `${item['createTime'].substring(0, 16)}` : `${item['createTime']}`}}</span>
              </div>
              <div class="layoutHorizontal"  style="margin-top: 6px;">
                <span style="font-size: 14px; color: #b9b9b9;white-space: nowrap; ">回复内容：</span>
                <span style="font-size: 14px; color: #4d4d4d;">{{item['replyContent']}}</span>
              </div>
            </div>
            <div class="layoutHorizontal" style="height:10px;background:#f6f6f6">
            </div>
            
          </div>
        </van-list>
        <epgis-empty-view v-else></epgis-empty-view>
      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
import { SuggestionTypeEnum, SuggestionStateEnum } from "@/enums/SuggestionEnum";

export default {
  components: {},
  data() {
    return {
      keyWord:'',
      showTotal: false,
      total: 0,
      finished: false,
      loading: false,
      dataList: [
        // {
        //   suggestionContent:"啊冷风机辣椒粉辣椒粉放假了发链接案例法理解反垃圾浪费距离解放路街道附近垃圾分类分类法雷奥",
        //   createTime:"2025-12-06 12:12:12",
        //   replyContent:"啊冷风机辣椒粉辣椒粉放假了发链接案例法理解反垃圾浪费距离解放路街道附近垃圾分类分类法雷奥"
        // },
        //  {
        //   suggestionContent:"啊冷风机辣椒粉辣椒粉放假了发链接案例法理解反垃圾浪费距离解放路街道附近垃圾分类分类法雷奥",
        //   createTime:"2025-12-06 12:12:12",
        //   replyContent:"这是回复"
        // },
      ],
      pageNum: 1,
      limit: 20,
      type:null,
      pageTitle:"",
    };
  },
  created() {
    console.log("类型：" + this.$route.query.type);
    this.type = this.$route.query.type;
    if(this.type == SuggestionTypeEnum.QUESTION){
      this.pageTitle = "问题列表";
    }else if(this.type == SuggestionTypeEnum.FUNCTION){
      this.pageTitle = "建议列表";
    }
    this.queryData();
  },
  mounted() {
  },
  destroyed() {
  },
  activated() {
  },
  methods: {

    submitMsg() {
      if(this.checkValue()){
        this.submitRegist();
      }
    },

    checkValue(){
      if (!this.content) {
        Notify({
            type: "danger",
            message: "请输入建议内容",
        });
        return false;
      } 
      return true;
    },

    queryData(){
      let that = this;
      this.finished = false;
      this.loading = true;
      Http.instance()
        .postJSON({
          url: "/makeFriends/api/suggestion/list",
          params: {
            page: this.pageNum + "",
            limit: this.limit + "",
            keyWord: this.keyWord ,
            type: this.type,
          },
        })
        .then((ret) => {
          // {
          //     "msg": "success",
          //     "code": 0,
          //     "page": {
          //         "totalCount": 2,
          //         "pageSize": 10,
          //         "totalPage": 1,
          //         "currPage": 1,
          //         "list": [
          //             {
          //                 "suggestionId": 1967144427799883778,
          //                 "userId": 1966434221252055042,
          //                 "suggestionContent": "建议想多了垃圾垃圾发啊",
          //                 "status": 0,
          //                 "createTime": "2025-09-14 16:32:34",
          //                 "replyContent": null
          //             },
          //             {
          //                 "suggestionId": 1967154370242326529,
          //                 "userId": 1966434221252055042,
          //                 "suggestionContent": "测试建议",
          //                 "status": 0,
          //                 "createTime": "2025-09-14 17:12:04",
          //                 "replyContent": null
          //             }
          //         ]
          //     }
          // }
          that.pageNum++;
          that.loading = false;
          that.dataList = that.dataList.concat(ret['page']['list'] || []);
          if (ret['page']['list'].length   < this.limit) {
            that.finished = true;
          }
        }).catch((result) =>{
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },


    onLoad() {
      this.queryData();
    },

    goSuggestionList(){
      this.$router.push({ name: 'SuggestionList' });
    },

    onSearch() {
      this.pageNum = 1;
      this.dataList = [];
      this.queryData();
    },









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  .uploaderAddBg{
    z-index: 100;
    background: #efefef;
    border-radius: 8px;
    // margin: 4px;
    position: relative;
    width: calc((100vw - 24px) / 4 - 8px);
    height: calc((100vw - 24px) / 4 - 8px);
  }
  .uploaderAddIcon{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .van-search {
    background: @primary-color;
  }
  .van-search__content {
    border-radius: 15px;
    font-size: 14px;
  }

  .listBox {
    flex: 1;
    overflow: scroll;
  }







</style>